<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title> 직접 만들어 보는 이미지 hover 효과 </title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>

<style>
body {
	margin:20px auto;
	padding:0;	
	width:600px;
	background:#192839;
}

div {
	background-image:url(img/pic_bg.jpg);
	width:600px;
	height:379px;
	border:5px #EF4018 solid; 
	overflow:hidden;
}
	 
div img{
	display:none;
	position:relative;
}


</style>
</head>

<body>
<div><img src="img/pic.jpg" /></div>

      
<!------------------------ jQuery 코드 ----------------------->
<script>

$("div").hover(
	function() {
		$(this).find("img").css({left:"-50px",
								 top:"-50px",
								 width:"700px",
								 opacity:0,
								 display:"inline"})
							.stop()
							.animate({left:"0px",
									  top:"0px",
									  opacity:1, 
									  width:"600px"},
									  500)
	
	}, function() {
		$(this).find("img")
			   .stop()
			   .fadeOut();
 	}
 
);


</script>
</body>
</html>

